/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-22 09:11:54
 * @LastEditors: 18163104359 2205227953@qq.com
 * @LastEditTime: 2024-01-25 16:33:13
 * @FilePath: /umi/src/layouts/index.jsx
 * @Description:
 */
import React, { useEffect } from "react";
import { Layout, ConfigProvider, theme, Affix, FloatButton } from "antd";
import { ToolOutlined } from "@ant-design/icons";
import ContentComponents from "./components/Content/index";
import SiderMenu from "./components/SiderMenu/index";
import NavigationMenu from "./components/Navigation/index";
import { connect, useSelectedRoutes, history } from "umi";

import Login from "../pages/login/index";
import { getToken } from "@/utils/auth";
import TabsPage from "./components/Tabs/index";
import { TransitionGroup, CSSTransition } from "react-transition-group";
import "./index.less";
const { useToken } = theme;
const { Header, Content, Sider } = Layout;
const LayoutPage = (props) => {
  const { dispatch, permission, appConfig } = props;
  const r = useSelectedRoutes();
  const lastRoute = r.at(-1);
  const { token } = useToken();

  useEffect(() => {
    // 获取用户信息
    dispatch({
      type: "user/getUserInfo",
    });
    // 初始化appConfig
    dispatch({
      type: "appConfig/initAppConfig",
    });
    // 初始化路由
    dispatch({
      type: "appConfig/getMenuList",
    });
  }, []);

  // 登录页走全局 不走layout
  if (history.location.pathname == "/login" || !getToken()) return <Login />;

  // 路由监听
  history.listen(() => {
    dispatch({
      type: "appConfig/setMenuKey",
      payload: location.pathname,
    });
    dispatch({
      type: "appConfig/setTabsList",
      payload: {
        label: lastRoute.route.name,
        path: lastRoute.route.path,
      },
    });
  });

  return (
    <ConfigProvider
      form={{ required: "'${name}' 是必选字段" }}
      componentSize={appConfig.size}
      theme={{
        token: {
          colorPrimary: appConfig.colorPrimary,
          // borderRadius: appConfig.borderRadius,
          algorithm: theme.darkAlgorithm,
        },
      }}
    >
      <Layout
        style={{
          height: "100%",
        }}
      >
        {appConfig.menuType != "3" ? <SiderMenu collapsed={appConfig.collapsed} /> : ""}
        <Layout
          style={{
            height: "100%",
            overflowY: "auto",
            overflowX: "hidden",
          }}
        >
          {" "}
          <Affix offsetTop={0.1}>
            <NavigationMenu />
            <TabsPage />
          </Affix>
          <TransitionGroup>
            <CSSTransition
              key={history.location.pathname}
              timeout={500}
              classNames="slide-left slide-right"
              unmountOnExit
            >
              <ContentComponents />
            </CSSTransition>
          </TransitionGroup>
          <FloatButton
            shape="circle"
            type="primary"
            style={{
              right: 10,
              top: "50%",
              fontSize: "30px",
            }}
            icon={<ToolOutlined />}
            onClick={() => {
              dispatch({
                type: "appConfig/setDrawerShow",
                payload: true,
              });
            }}
          />
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};
export default connect((state) => ({ permission: state.permission, appConfig: state.appConfig }))(
  LayoutPage
);
